<template>
  <div class="homework-summary anchor-offset" id="homework-summary">
    <h3 class="scoreStateTitle">作业周/月汇总</h3>
    <div class="boxlistMain">
      <el-card v-loading="loading">
        <div class="header-controls">
          <el-radio-group v-model="summaryType" @change="handleTypeChange">
            <el-radio-button label="week">周汇总</el-radio-button>
            <el-radio-button label="month">月汇总</el-radio-button>
          </el-radio-group>
        </div>

        <el-table :data="summaryData" border stripe
          :header-cell-style="{ background: '#E8F0FA', color: '#2A303B', fontWeight: '500' }" class="custom-table"
          tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="period" label="时间" align="center" />
          <el-table-column label="提交率" align="center">
            <template slot-scope="scope">
              {{ formatNumber(scope.row.submitRate) }}%
            </template>
          </el-table-column>
          <!-- <el-table-column label="平均分" align="center" width="100">
            <template slot-scope="scope">
              {{ formatNumber(scope.row.avgScore) }}
            </template>
          </el-table-column>
          <el-table-column label="最高分" align="center" width="100">
            <template slot-scope="scope">
              {{ formatNumber(scope.row.maxScore) }}
            </template>
          </el-table-column>
          <el-table-column label="最低分" align="center" width="100">
            <template slot-scope="scope">
              {{ formatNumber(scope.row.minScore) }}
            </template>
          </el-table-column>
          <el-table-column prop="wrongKnowledgePoints" label="错题知识点" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tooltip effect="dark" :content="scope.row.wrongKnowledgePoints" placement="top"
                :disabled="!scope.row.wrongKnowledgePoints">
                <span>{{ scope.row.wrongKnowledgePoints || '-' }}</span>
              </el-tooltip>
            </template>
          </el-table-column> -->
          <el-table-column label="作业次数" align="center">
            <template slot-scope="scope">
              {{ scope.row.homeworkCount || 0 }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getHomeworkSummary } from '@/api/score'
export default {
  name: 'HomeworkSummary',
  props: {
    examId: {
      type: [String, Number],
      required: true
    },
    classId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      loading: false,
      summaryType: 'week',
      summaryData: []
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    async handleTypeChange () {
      await this.loadData()
    },
    async loadData () {
      try {
        this.loading = true
        const { data } = await getHomeworkSummary(this.examId, this.classId, this.summaryType)
        console.info('data', data)
        if (data) {
          this.summaryData = data || []
        } else {
          this.$message.error(data.message || '获取数据失败')
          this.summaryData = []
        }
      } catch (error) {
        console.error('加载作业汇总数据失败:', error)
        this.$message.error('加载数据失败')
        this.summaryData = []
      } finally {
        this.loading = false
      }
    },
    formatNumber (value) {
      if (!value && value !== 0) return '0.00'
      return Number(value).toFixed(2)
    }
  }
}
</script>

<style scoped>
.boxlistMain {
  background: #FFFFFF;
  box-shadow: 0 4px 16px 0 #5572921a;
  border-radius: 10px;
  padding: 24px;
}

.header-controls {
  margin-bottom: 14px;
}

.exam-details {
  max-height: 100px;
  overflow-y: auto;
}

.exam-details p {
  margin: 5px 0;
  line-height: 1.4;
}

.scoreStateTitle {
  font-size: 18px;
  color: #295CFF;
  line-height: 45px;
  font-weight: normal;
  position: relative;
  padding-left: 25px;
  font-weight: bold;
}

.scoreStateTitle:after {
  content: '';
  width: 14px;
  height: 14px;
  opacity: 0.5;
  background: #295CFF;
  border-radius: 14px;
  position: absolute;
  left: 0;
  top: 15px;
}

.scoreStateTitle::before {
  content: '';
  width: 8px;
  height: 8px;
  opacity: 0.2;
  background: #295CFF;
  border-radius: 14px;
  position: absolute;
  left: 10px;
  top: 23px;
}

.custom-table {
  width: 100%;
  border: 1px solid rgba(216, 228, 240, 1);
  border-radius: 10px;
  border-right: none;
  border-bottom: none;
  margin-top: 0;
}

/* 自定义表格内部元素的样式 */
.custom-table>>>.el-table__header-wrapper th {
  background-color: rgb(232, 240, 250);
  height: 42px;
  padding: 0;
  text-align: center;
  font-weight: normal
}

.custom-table>>>.el-table__row td {
  height: 42px;
  padding: 0;
  text-align: center;
  border-bottom: none;
  border-right: solid 1px rgba(216, 228, 240, 1);
}

.el-table .warning-row {
  background: #ffffff;
}

.el-table .success-row {
  background: #D8E4F0;
}

.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover,
.el-cascader__dropdown,
.el-color-picker__panel,
.el-message-box,
.el-notification {
  box-shadow: none;
}

.boxlistMain>>>.el-card__body,
.boxlistMain>>>.el-main {
  padding: 0 !important;
}

.boxlistMain>>>.el-card {
  border: none;
}

.boxlistMain>>>.el-radio-button__inner {
  border: solid 1px #295CFF;
  background: rgb(242, 246, 255);
  color: #295CFF;
  padding: 7px 20px;
}

.boxlistMain>>>.el-radio-button__orig-radio:checked+.el-radio-button__inner {
  background: #295CFF;
  color: #fff;
}
.anchor-offset {
  scroll-margin-top: 50px;
}
</style>